<template>
  <div class="login">
    <div class="relative">
      <div class="left">
        <el-row>
          <el-col :span="24">
            <div class="homepageLogo">
              <ul>
                <li>
                  <el-image style="width: 50px; height: 50px" :src="url" fit="fit" />
                </li>
                <li><span>Form Approval</span></li>
              </ul>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-image class="boxbg" :src="boxbg" fit="fit" />
            <p class="p1">欢迎使用本系统</p>
            <p class="p2">开箱即用的中后台管理系统</p>
          </el-col>
        </el-row>
      </div>
      <div class="right">
        <el-row>
          <el-col :span="24">
            <h2>登录</h2>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form :model="form" label-width="120px" label-position="left" size="large" class="form">
              <el-form-item label="用户名" prop="userName">
                <el-input v-model="form.name" />
              </el-form-item>
              <el-form-item label="密码" prop="passWord">
                <el-input v-model="form.password" type="password" show-password />
              </el-form-item>
              <el-form-item label="验证码" prop="code" class="grid-container">
                <el-input class="grid-item"></el-input>
                <el-image class="grid-item"></el-image>
              </el-form-item>
              <el-form-item>
                <el-button class="submitBtn" type="primary" @click="Login()">登录
                </el-button>
              </el-form-item>
              <el-form-item>
                <el-button class="submitBtn" type="success" @click="Create()">注册</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
  
<script lang="ts" setup>
import { ref, reactive } from "vue";
import { useRouter } from 'vue-router';
const router = useRouter()

const url = ref("../../../public/background/undraw_upload_re_pasx.svg");
const boxbg = ref("../../../public/background/attackAnalysisManage.svg");

const form = reactive({
  name: '',
  password: '',
  code:''
})

const Login = () =>{
  console.log("submitBtn");
  router.push({path:'/desktop'})
}

const Create = () =>{
  console.log("Create");
  router.push({ path: '/register' });
}

</script>
  
<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  background-image: url('../../../public/background/Stripe.jpg');

  .relative {
    width: 100%;
    height: 100%;
    text-align: center;

    .left {
      width: 50%;
      height: 100%;
      float: left;
      // background-image: url('../../../public/background/Stripe.jpg');

      .boxbg {
        width: 350px;
        height: 350px;
        margin-top: 100px;
      }

      .homepageLogo {
        height: 50px;
        line-height: 50px;
        margin-top: 40px;

        span {
          color: white;
          font-size: 24px;
        }

        ul {
          list-style: none;

          li {
            float: left;
            margin-left: 5px;
          }
        }
      }

      p {
        color: white;
      }

      .p1 {
        font-size: 1.875rem;
        line-height: 2.25rem;
      }

      .p2 {
        font-size: 0.875rem;
        line-height: 1.25rem;
      }
    }

    .right {
      width: 50%;
      float: left;
      padding-top: 15%;

      .form {
        width: 50%;
        margin: 0px auto;

        .grid-container {
          display: grid;
          grid-template-columns: repeat(2, auto);
          /* Adjust column count as needed */
          grid-gap: 10px;
          /* Adjust spacing as needed */
        }

        .grid-item {
          width: 50%;
          /* Make sure items take up the available width */
        }

        .submitBtn {
          width: 100%;
        }
      }
    }
  }
}</style>